<template>
  <!--  viser图表-->
  <div v-if="data.length" :ref="chartId" class="svg-wrap">
    <!--    <el-button @click="getSvg">download</el-button>-->
    <v-chart
      :force-fit="true"
      height="400"
      :data="data"
      :scale="scale"
      :padding="padding"
      renderer="canvas"
    >
      <v-tooltip :crosshairs="false"></v-tooltip>
      <v-legend :attach-last="true"></v-legend>
      <v-line position="time*cpu" :color="color" shape="splitLine"></v-line>
      <v-point position="time*cpu" shape="breathPoint"></v-point>
      <v-axis data-key="time" :label="label"></v-axis>
      <v-axis data-key="cpu" :label="label"></v-axis>
      <v-guide
        type="regionFilter"
        :top="true"
        :start="start1"
        :end="end"
        color="#ff4d4f"
      ></v-guide>
      <v-guide
        type="line"
        :start="start2"
        :end="end"
        :line-style="lineStyle"
        :text="text"
      ></v-guide>
    </v-chart>
  </div>
</template>

<script>
  // import { registerShape } from 'viser-vue'
  import { jquery } from 'jquery'
  let nowDate = '14.50'
  let getColor = function () {}
  function splitData(data) {
    var marker = data.length - Math.floor(data.length * 0.0001)
    var data1 = []
    var data2 = []
    for (var i = 0; i < data.length; i++) {
      var d = data[i]
      if (i <= marker) {
        data1.push(d)
      } else {
        data2.push(d)
      }
    }
    // data1.push(data2[0]);

    return [data1, data2]
  }

  export default {
    name: 'CpuChart',
    props: {
      inputData: {
        type: Object,
        default: () => {
          return {
            data: [
              { date: 'yesterday', time: '13.00', cpu: 13.93689627294421 },
              { date: 'yesterday', time: '13.05', cpu: 95.06585239044342 },
              { date: 'yesterday', time: '13.10', cpu: 66.42719381417056 },
              { date: 'yesterday', time: '13.15', cpu: 63.060669399125935 },
              { date: 'yesterday', time: '13.20', cpu: 64.04639809297761 },
              { date: 'yesterday', time: '13.25', cpu: 64.45117682728456 },
              { date: 'yesterday', time: '13.30', cpu: 63.35488066344804 },
              { date: 'yesterday', time: '13.35', cpu: 65.2969449309885 },
              { date: 'yesterday', time: '13.40', cpu: 66.35014444552017 },
              { date: 'yesterday', time: '13.45', cpu: 66.198378961063 },
              { date: 'yesterday', time: '13.50', cpu: 66.85520134738813 },
              { date: 'yesterday', time: '13.55', cpu: 65.05419984325125 },
              { date: 'yesterday', time: '14.00', cpu: 66.62243229531435 },
              { date: 'yesterday', time: '14.05', cpu: 66.77808066603122 },
              { date: 'yesterday', time: '14.10', cpu: 66.9144977524293 },
              { date: 'yesterday', time: '14.15', cpu: 65.05499508303669 },
              { date: 'yesterday', time: '14.20', cpu: 66.36871158902638 },
              { date: 'yesterday', time: '14.25', cpu: 63.973903073723044 },
              { date: 'yesterday', time: '14.30', cpu: 64.92585536363889 },
              { date: 'yesterday', time: '14.35', cpu: 65.17145801764055 },
              { date: 'yesterday', time: '14.40', cpu: 64.42516834555609 },
              { date: 'yesterday', time: '14.45', cpu: 63.701363912573775 },
              { date: 'yesterday', time: '14.50', cpu: 66.11568649665543 },
              { date: 'yesterday', time: '14.55', cpu: 64.0474592964878 },
              { date: 'yesterday', time: '15.00', cpu: 64.25676632707459 },
              { date: 'yesterday', time: '15.00', cpu: 65 },
              { time: '13.00', cpu: 100, date: 'today' },
              { time: '13.05', cpu: 100, date: 'today' },
              { time: '13.10', cpu: 100, date: 'today' },
              { time: '13.15', cpu: 100, date: 'today' },
              { time: '13.20', cpu: 100, date: 'today' },
              { time: '13.25', cpu: 100, date: 'today' },
              { time: '13.30', cpu: 100, date: 'today' },
              { time: '13.35', cpu: 100, date: 'today' },
              { time: '13.40', cpu: 100, date: 'today' },
              { time: '13.45', cpu: 100, date: 'today' },
              { time: '13.50', cpu: 100, date: 'today' },
              { time: '13.55', cpu: 100, date: 'today' },
              { time: '14.00', cpu: 65, date: 'today' },
              { time: '14.05', cpu: 72.16886580736812, date: 'today' },
              { time: '14.10', cpu: 68.57230489482068, date: 'today' },
              { time: '14.15', cpu: 71.43150028596347, date: 'today' },
              { time: '14.20', cpu: 78.14636866352923, date: 'today' },
              { time: '14.25', cpu: 68.36883432160218, date: 'today' },
              { time: '14.30', cpu: 75.39521675212667, date: 'today' },
              { time: '14.35', cpu: 75.27433214647408, date: 'today' },
              { time: '14.40', cpu: 82.10189835378893, date: 'today' },
              { time: '14.45', cpu: 84.7261454369566, date: 'today' },
              { time: '14.50', cpu: 78.96269733695286, date: 'today' },
              { time: '14.55', cpu: 86.43607929073264, date: 'today' },
              { time: '15.00', cpu: 95, date: 'today' },
              { time: '14.00', cpu: 40, date: 'today1' },
              { time: '18.00', cpu: 40, date: 'today1' },
              { time: '19', cpu: 40, date: 'today1' },
            ],
            Scale: {
              xAxis: {
                dataKey: 'time',
                min: 13.0,
                max: 16.0,
              },
              yAxis: {
                dataKey: 'cpu',
                max: 100,
                min: 0,
              },
            },
            standardLine: {
              //标准线
              start: 85,
              end: 85,
              color: '#595959',
            },
            lineColor: {
              //折线颜色，对应图例颜色序号
              yesterday: 0,
              today1: 2,
            },
          }
        },
      },
      executeMethod: {
        type: String,
        default: '',
      },
      chartId: {
        type: String,
        default: 'chart',
      },
    },
    data() {
      return {
        data: '',
        // testdata:[{"date":"yesterday","time":"13.00","cpu":13.93689627294421},{"date":"yesterday","time":"13.05","cpu":95.06585239044342},{"date":"yesterday","time":"13.10","cpu":66.42719381417056},{"date":"yesterday","time":"13.15","cpu":63.060669399125935},{"date":"yesterday","time":"13.20","cpu":64.04639809297761},{"date":"yesterday","time":"13.25","cpu":64.45117682728456},{"date":"yesterday","time":"13.30","cpu":63.35488066344804},{"date":"yesterday","time":"13.35","cpu":65.2969449309885},{"date":"yesterday","time":"13.40","cpu":66.35014444552017},{"date":"yesterday","time":"13.45","cpu":66.198378961063},{"date":"yesterday","time":"13.50","cpu":66.85520134738813},{"date":"yesterday","time":"13.55","cpu":65.05419984325125},{"date":"yesterday","time":"14.00","cpu":66.62243229531435},{"date":"yesterday","time":"14.05","cpu":66.77808066603122},{"date":"yesterday","time":"14.10","cpu":66.9144977524293},{"date":"yesterday","time":"14.15","cpu":65.05499508303669},{"date":"yesterday","time":"14.20","cpu":66.36871158902638},{"date":"yesterday","time":"14.25","cpu":63.973903073723044},{"date":"yesterday","time":"14.30","cpu":64.92585536363889},{"date":"yesterday","time":"14.35","cpu":65.17145801764055},{"date":"yesterday","time":"14.40","cpu":64.42516834555609},{"date":"yesterday","time":"14.45","cpu":63.701363912573775},{"date":"yesterday","time":"14.50","cpu":66.11568649665543},{"date":"yesterday","time":"14.55","cpu":64.0474592964878},{"date":"yesterday","time":"15.00","cpu":64.25676632707459},{"date":"yesterday","time":"15.00","cpu":65},{"time":"13.00","cpu":100,"date":"today"},{"time":"13.05","cpu":100,"date":"today"},{"time":"13.10","cpu":100,"date":"today"},{"time":"13.15","cpu":100,"date":"today"},{"time":"13.20","cpu":100,"date":"today"},{"time":"13.25","cpu":100,"date":"today"},{"time":"13.30","cpu":100,"date":"today"},{"time":"13.35","cpu":100,"date":"today"},{"time":"13.40","cpu":100,"date":"today"},{"time":"13.45","cpu":100,"date":"today"},{"time":"13.50","cpu":100,"date":"today"},{"time":"13.55","cpu":100,"date":"today"},{"time":"14.00","cpu":65,"date":"today"},{"time":"14.05","cpu":72.16886580736812,"date":"today"},{"time":"14.10","cpu":68.57230489482068,"date":"today"},{"time":"14.15","cpu":71.43150028596347,"date":"today"},{"time":"14.20","cpu":78.14636866352923,"date":"today"},{"time":"14.25","cpu":68.36883432160218,"date":"today"},{"time":"14.30","cpu":75.39521675212667,"date":"today"},{"time":"14.35","cpu":75.27433214647408,"date":"today"},{"time":"14.40","cpu":82.10189835378893,"date":"today"},{"time":"14.45","cpu":84.7261454369566,"date":"today"},{"time":"14.50","cpu":78.96269733695286,"date":"today"},{"time":"14.55","cpu":86.43607929073264,"date":"today"},{"time":"15.00","cpu":95,"date":"today"},
        //   {"time":"14.00","cpu":40,"date":"today1"},{"time":"15.00","cpu":40,"date":"today1"} ],
        start1: ['min', 105],
        start2: ['min', this.inputData.standardLine.start], //预警线开始
        end: ['max', this.inputData.standardLine.end], //预警线结束
        label: {
          textStyle: {
            fill: '#aaaaaa', //x,y轴刻度颜色
          },
        },
        text: {
          //预警线字体样式
          position: 'start', //预警线位置
          style: {
            fill: '#8c8c8c',
            fontSize: 15,
            fontWeight: 'normal',
          },
          content: '预警线 85%',
          offsetY: -5,
        },
        lineStyle: {
          //预警线样式
          stroke: this.inputData.standardLine.color,
          lineWidth: 1,
          lineDash: [3, 3],
        },
        scale: [
          {
            dataKey: this.inputData.Scale.xAxis.dataKey, //x轴
            min: this.inputData.Scale.xAxis.min,
            max: this.inputData.Scale.xAxis.max,
          },
          {
            dataKey: this.inputData.Scale.yAxis.dataKey, //y轴
            max: this.inputData.Scale.yAxis.max,
            min: this.inputData.Scale.yAxis.min,
          },
        ],
        padding: [20, 100, 50, 50],
        color: [
          'date',
          [
            '#ced4d9',
            '#1890ff',
            '#00FFFF',
            '#7FFFD4',
            '#DC143C',
            '#B8860B',
            '#8B008B',
            '#E9967A',
            '#FF1493',
          ],
        ], //图例折线颜色
      }
    },
    computed: {},
    watch: {
      executeMethod: function (newValue, oldValue) {
        if (newValue.indexOf('download') != -1) {
          this.getimage()
        }
      },
    },
    mounted() {
      // $.getJSON('https://viserjs.github.io/assets/data/cpu-data.json',data=>{
      //   // this.$data.data = data;
      // });
      this.$data.data = this.inputData.data
      getColor = this.getLineColor
    },
    created() {},
    methods: {
      getLineColor: function (type) {
        return this.color[1][this.inputData.lineColor[type]]
      },
      getimage: function () {
        // this.chartId = this.getId;
        // var canvas = document.getElementsByTagName("canvas");
        var canvas = this.$refs[this.chartId].getElementsByTagName('canvas')
        if (canvas) {
          // 创建标签
          var oA = document.createElement('a')
          // 设置下载名称
          oA.download = this.chartId + '图表' + '.jpeg'

          var c = canvas[0]
          // //背景颜色
          var ctx = c.getContext('2d')
          ctx.fillStyle = '#ffffff'
          ctx.globalCompositeOperation = 'destination-over' //在目标图像下显示该图像
          ctx.fillRect(0, 0, c.width, c.height)

          // 设置地址以及文件类型
          oA.href = c.toDataURL('image/jpeg', 1)

          // oA.href = canvas[0].toDataURL("image/jpeg",1);

          document.body.appendChild(oA)
          // 触发下载事件
          oA.click()
          // 移除标签
          oA.remove()
        }
      },
    },
    getId: function () {
      function S4() {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
      }
      return S4() + S4() + S4() + S4() + S4() + S4() + S4() + S4()
    },
  }
</script>
